<!--
状态持久化：
  1、场景： 使用状态持久化插件可以在页面刷新或重启应用时保留 Store 数据。
  2、安装插件：npm/cnpm/pnpm install pinia-plugin-persistedstate
  3、配置插件
    !main.ts
    import { createPinia } from 'pinia';
    import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

    const pinia = createPinia();
    pinia.use(piniaPluginPersistedstate);

    ?挂载到 Vue 实例
    import { createApp } from 'vue';
    import App from './App.vue';

    const app = createApp(App);
    app.use(pinia);
    app.mount('#app');
!自定义配置数据持久化
!persist：
  pinia-plugin-persistedstate 插件提供的配置项，用于在 Store 中启用状态持久化
  !key: 'userStore'
    作用： 定义存储在 localStorage 或 sessionStorage 中的键名。
    如果不指定键名，插件会默认使用 Store 的 ID（例如这里是 'userStore'）作为键名
  !storage: localStorage
    作用： 指定存储位置。
    可选值：
      localStorage： 数据会持久化保存，页面关闭后仍然存在。
      sessionStorage： 数据仅在当前会话中有效，页面关闭后会丢失。
  !pick
    作用： 指定需要持久化的状态字段。
    类型： string[]
    默认值： undefined（默认持久化整个 Store）。
    说明： 如果只需要部分字段持久化，可以通过 pick 指定。
   !serializer
   作用：自定义序列化器
   语法：serializer: {
          serialize: (value: number) => btoa(JSON.stringify(value)), //base64编码
          deserialize: (value: string) => JSON.parse(atob(value)),//base64解码
        },
!常见配置项
配置项      	类型	          默认值        	      描述
key	          string	       Store 名称	            存储在 Storage 中的键名。
storage	      Storage	       localStorage	          存储方式，可选 localStorage 或 sessionStorage。
pick	        string[]	     undefined	             选择性持久化某些字段（不设置则默认存储全部）。
serializer	  object	       内置 JSON 序列化器	      自定义序列化器，包括 serialize 和 deserialize。
-->
<template>
  <div id="wrap">
    <h1>状态管理pinia进阶</h1>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo64',
};
</script>

<script lang="ts" setup></script>

<style lang="scss"></style>
